<template>
    <el-dialog v-model="visible" @close="closePage" :title="title" width="35%">
        <div style="max-height: calc(100vh - 250px);overflow: auto;">
            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px" size="large">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="formData.username" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="真实姓名" prop="realName">
                    <el-input v-model="formData.realName" placeholder="请输入真实姓名" />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="formData.phone" placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="formData.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="formData.sex" placeholder="请选择性别" :clearable="true" :filterable="true">
                        <el-option v-for="(item, index) in sexList" :label="item.label" :value="item.value"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门" prop="deptId">
                    <el-tree-select v-model="formData.deptId" placeholder="请选择部门" :data="deptList"
                        :props="deptTreeProps" check-strictly :clearable="true" :filterable="true"
                        :render-after-expand="false" default-expand-all />
                </el-form-item>
                <el-form-item label="岗位" prop="postId">
                    <el-select v-model="formData.postId" placeholder="请选择岗位" :clearable="true" :filterable="true">
                        <el-option v-for="(item, index) in postList" :label="item.name" :value="item.id"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色" prop="roleIds">
                    <el-select v-model="formData.roleIds" placeholder="请选择角色" :clearable="true" :filterable="true"
                        multiple>
                        <el-option v-for="(item, index) in roleList" :label="item.name" :value="item.id"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closePage">取消</el-button>
                <el-button type="primary" @click="addOrUpdate">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { addReq, updateReq } from "@/api/sys/user/index.js"
import { queryPostAllReq } from "@/api/sys/post/index.js"
import { querySysRoleAllReq } from "@/api/sys/role/index.js"
import { success } from '@/utils/messageUtils.js';
const props = defineProps({
    querySelective: Function,
    deptList: Array,
    deptTreeProps: Object
})

const formRef = ref()
const formData = reactive({
    id: null,
    username: '',
    realName: '',
    phone: '',
    email: '',
    sex: '',
    deptId: null,
    postId: null,
    roleIds: [],
})

const formRules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
    // phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
    // email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
    // sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    // deptId: [{ required: true, message: '请选择部门', trigger: 'blur' }],
    // postId: [{ required: true, message: '请选择岗位', trigger: 'blur' }],
    // roleIds: [{ required: true, message: '请选择角色', trigger: 'blur' }],
}

// 打开dialog
const sexList = ref([{ label: '未知', value: '1' }, { label: '男', value: '2' }, { label: '女', value: '3' }])

const postList = ref([])
const roleList = ref([])
const title = ref()
const isAdd = ref(true)
const visible = ref(false)
const open = (type,row) => {
    Promise.all([
        queryPostAllReq(),
        querySysRoleAllReq(),
    ]).then(([postListRes, roleListRes
    ]) => {
        postList.value = postListRes.data;
        roleList.value = roleListRes.data;

        // 重置表单
        formRef.value?.resetFields()
        if (type === 'update') {
            title.value = '修改用户'
            isAdd.value = false

            formData.id = row.id
            formData.username = row.username
            formData.realName = row.realName
            formData.phone = row.phone
            formData.email = row.email
            formData.sex = row.sex
            formData.deptId = row.sysDept?.id
            formData.postId = row.sysPost?.id
            // 重新push角色
            formData.roleIds = []
            row.sysRoles?.forEach(item => {
                formData.roleIds.push(item.id)
            })
        } else if(type === 'add'){
            title.value = '添加用户'
            isAdd.value = true

            formData.id = null
            formData.username = ''
            formData.realName = ''
            formData.phone = ''
            formData.email = ''
            formData.sex = ''
            formData.deptId = null
            formData.postId = null
            formData.roleIds = []
        }
        visible.value = true;
    });
}

defineExpose({
    open,
})

// 关闭dialog
const closePage = () => {
    visible.value = false;
}

// 修改
const addOrUpdate = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            if (isAdd.value) {
                addReq(formData).then(res => {
                    if (res.code == 200) {
                        success(res.message);
                        props.querySelective();
                        closePage();
                    }
                })
            } else {
                updateReq(formData).then(res => {
                    if (res.code == 200) {
                        success(res.message);
                        props.querySelective();
                        closePage();
                    }
                })
            }
        }
    })
}
</script>